<template>
	<el-card>
		<template #header>
			<div class="card-header">
				<span>全部板块</span>
			</div>
		</template>
		<div class="board-list-content">
			<!--用板块创建时间当作锚点，点击快速跳转-->
			<a :href="`#${item.created_at}`" @click.prevent="scrollToAnchor(item.created_at)" v-for="item in boardList">{{item.name}}</a>
		</div>
	</el-card>
</template>
<script setup lang="ts">
import {board_list} from '/@/api/forum'
import {ref} from 'vue'

//板块列表
const boardList = ref([])
const getBoardList = async ()=>{
	const res = await board_list()
	boardList.value = res.data.boards
}
getBoardList()

const scrollToAnchor = (anchorId: string) => {
	const element = document.getElementById(anchorId);
	if (element) {
		element.scrollIntoView({ behavior: 'smooth' });
	}
}
</script>
<style scoped lang="scss">
.board-list-content{
	display: flex;
	flex-direction: column;
	width: 100%;
	a{
		width: 100%;
		display: block;
		text-decoration: none;
		line-height: 30px;
		color: #333;
		padding-left: 8px;
		border-radius: 8px;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		margin-bottom: 8px;

		&:visited{
			color: #333;
		}
		&:hover{
			background: #409eff;
			color: #fff;
		}
	}
}
</style>
